<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/backend/plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="/backend/styles/page.css">
  <link rel="stylesheet" href="/backend/styles/index.css"/>
  <link rel="stylesheet" href="/backend/styles/common.css"/>
</head>
<body style="height: auto;">
<div>
  <div class="dashboard-container" id="app">
    <el-button type="info" icon="el-icon-plus" round @click="addUser()">新建用户</el-button>
    <el-table
            :data="tableData"
            stripe
            class="tableBox"
            style="width: 100%">
      <el-table-column
              prop="username"
              label="用户名称"
              width="200">
      </el-table-column>
      <el-table-column
              prop="password"
              label="用户密码"
              width="200">
      </el-table-column>
      <el-table-column
              prop="phone"
              label="手机号"
              width="200">
      </el-table-column>
      <el-table-column
              prop="status"
              label="状态"
              width="50">
      </el-table-column>
      <el-table-column
              label="操作"
              width="160"
              align="center"
      >
        <template slot-scope="scope">
          <el-button
                  type="text"
                  size="small"
                  class="blueBug"
                  @click="updateUser(scope.row.id)"
          >
            修改
          </el-button>
          <el-button
                  type="text"
                  size="small"
                  class="blueBug"
                  @click="statusHandle(scope.row.id)"
          >
            {{ scope.row.status == '0' ? '启用' : '停用' }}
          </el-button>
          <el-button
                  type="text"
                  size="small"
                  class="delBut non"
                  @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            style="text-align: center"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="counts"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</div>
</body>
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/user.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                page: 1,
                pageSize: 7,
                counts: '',
                tableData: [],
                userState: ''
            }
        },
        mounted: function () {
            this.getUserPage()
        },
        methods: {
            async getUserPage() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                }
                await getUserPage(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleQuery() {
                this.page = 1;
                this.getUserPage();
            },
            // 删除
            async deleteHandle(id) {
                this.$confirm('确认删除该用户, 是否继续?', '确定删除', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    const params = {
                        id: id,
                        page: this.page,
                        pageSize: this.pageSize
                    }
                    deleteUser(params).then(res => {
                        if (res.code === 1) {
                            this.$message.success('删除成功！')
                            this.handleQuery()
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
            //状态更改
            async statusHandle(id) {
                const params = {
                    id: id,
                    page: this.page,
                    pageSize: this.pageSize
                }
                this.$confirm('确认更改该菜品状态?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                    // 启用停用
                    userStatusByStatus(params).then(res => {
                        if (res.code === 1) {
                            this.$message.success('用户状态已经更改成功！')
                            this.handleQuery()
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
            async handleCurrentChange(page) {
                const params = {
                    page: page,
                    pageSize: this.pageSize,
                }
                await getUserPage(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            async updateUser(id) {
                window.localStorage.setItem('page', this.page)
                window.localStorage.setItem('pageSize', this.pageSize)
                window.location.href = '/backend/pages/user/add.html?id=' + id
            },
            async addUser() {
                window.location.href = '/backend/pages/user/add.html'
            }
        }
    })
</script>
</html>